<!DOCTYPE html>
<html lang="en">
<head>
    <!--<base href="http://localhost:8080/memorypalace/">-->
    <meta charset="UTF-8">
    <title>我的知识体系</title>

    <!--jsmind-->
    <link rel="stylesheet" href="websrc/plug-in/jsmind/css/jsmind.css"/>

    <link rel="stylesheet" href="websrc/plug-in/hDialog/css/animate.min.css"/>
    <!-- 动画效果 -->
    <link rel="stylesheet" href="websrc/plug-in/hDialog/css/common.css"/>
    <!-- 页面基本样式 -->

    <!--bootstrap-->
    <link rel="stylesheet"
          href="websrc/bootstrap-3.3.7-dist/css/bootstrap.css">
    <!--自己的-->
    <link rel="stylesheet" href="websrc/css/common.css">
    <link rel="stylesheet" href="websrc/css/knowledge.css">
    <script type="text/javascript" src="websrc/js/jquery-3.2.1.js"></script>
    <script type="text/javascript"
            src="websrc/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style type="text/css">
        #jsmind_container {
            width: 1200px;
            height: 550px;
            border: solid 1px #ccc;
            /*background:#f4f4f4;*/
            background: #f4f4f4;
            margin: 0 auto;
        }
    </style>
<script type="text/javascript">
$.ajax({
	        'url': '/memorypalace/getuser.action',
	        'type': 'GET',
	        'success': function (userJSON) {
                //alert("一登陆");
                
                var userObj = JSON.parse(userJSON);
                var h = '<span style="padding-right:10px">'+userObj.userName+'</span>'+
    				'<a href="/memorypalace/loginout.action">退出</a>';
				$("#userUL").html(h);
	        },
	        'error':function (){
                //alert("未登录");
                var h = '<a href="login.jsp">登录</a>'+
				'<a href="register.jsp">注册</a>';
				$("#userUL").html(h);
	        }
	    });
</script>
</head>

<body>
<div class="header clearfix">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                        data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand header-left clearfix" href="#">
                    <div class="logo">LOGO</div>
                    <div class="projectName">记忆宫殿</div>
                    <div class="projectEnglishName">Memory Palace</div>
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse"
                 id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/memorypalace/index-login.html">个人首页<span class="sr-only">(current)</span></a></li>
                    <li><a href="/memorypalace/study/getsl.action">学习列表</a></li>
                    <li><a href="/memorypalace/mydeck.html">浏览牌组</a></li>
                    <li class="active"><a href="/memorypalace/myknowledgetree.html">知识体系</a></li>


                </ul>

               <ul id="userUL" class="nav navbar-nav navbar-right" style="padding-top: 28px;padding-right: 10px">
					
				<!-- 	<c:if test="${users.userId==null}">
							<a href="login.jsp">登录</a>
							<a href="register.jsp">注册</a>
						</c:if>
					<c:if test="${users.userId!=null}">
						<span>${users.userName}</span>
						<a href="/memorypalace/loginout">退出</a>
					</c:if>			 -->
		
				</ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
</div>
<!-- 下面是工具栏 -->
<div class="toolbar clearfix">
    <div class="btn-group toolbar-right" role="group" aria-label="...">
        <button id="addKnowledgeHBoxBtn" type="button"
                class="btn btn-default zoomIn" onclick="clickaddKnowledge(this)">添加
        </button>
        <button id="editKnowledgeHBoxBtn" type="button"
                class="btn btn-default zoomIn" onclick="clickeditKnowledge(this)">编辑
        </button>
        <button type="button" class="btn btn-default"
                onclick="deleteKnowledge()">删除
        </button>
        <!--<button type="button" class="btn btn-default" onclick="showError()">提示</button>-->
    </div>
</div>
<!-- 弹窗开始-->
<div id="knowledgeHBox" style="display:none;">
    <form action="" method="post" onsubmit="return false;"
          style="padding:5px 20px">
        <!--标题-->
        <h2>添加知识体系</h2>
        <input id="knowledgeId" type="hidden">
        <!--属性-->
        <div class="row myline">
            <!--名称输入框-->
            <div class="col-lg-4">
                <div class="input-group">
                    <span class="input-group-addon" id="sizing-addon2">名称</span>
                    <input id="knowledgeName" type="text" class="form-control"
                           placeholder="知识体系名称" aria-describedby="sizing-addon2"
                           onchange="knowledgeNameOnChange(this.value)"
                    >
                </div>
            </div>
            <!-- /.col-lg-4 -->
            <!--类型-->
            <div class="col-lg-4">
                <div class="input-group">
                    <span class="input-group-addon" id="sizing-addon3">知识体系类型</span>
                    <div class="input-group-btn" aria-describedby="sizing-addon3">
                        <button id="knowledgeType" type="button"
                                class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            节点<span class="caret" style="margin-left:0.5em"></span>
                        </button>
                        <ul class="dropdown-menu" id="knowledgeTypeList">
                            <li><a href="javascript:changeDropDownBtnValue('节点','knowledgeType',1)">节点</a></li>
                            <li><a href="javascript:changeDropDownBtnValue('母集','knowledgeType',2)">母集</a></li>
                            <li><a href="javascript:changeDropDownBtnValue('序列','knowledgeType',3)">序列</a></li>
                            <li><a href="javascript:changeDropDownBtnValue('有向图','knowledgeType',4)">有向图</a></li>
                        </ul>
                    </div>
                    <!-- /btn-group -->
                </div>
            </div>
            <!-- /.col-lg-4 -->
            <!--父知识体系-->
            <div class="col-lg-4">
                <div class="input-group">
                    <span class="input-group-addon" id="sizing-addon4">父知识体系</span>
                    <div class="input-group-btn" aria-describedby="sizing-addon2">
                        <button type="button" id="knowledgeFatherId"
                                class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            无<span class="caret" style="margin-left:0.5em"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right"
                            id="knowledgeFatherIdList"></ul>
                    </div>
                    <!-- /btn-group -->
                </div>
            </div>
            <!-- /.col-lg-4 -->
        </div>
        <!-- /.row -->
        <hr>
        <!--下面是卡片列表-->
        <!--按钮组-->
        <div class="row">
            <!--名称输入框-->
            <div class="col-lg-2">
                <!--标题-->
                <h3>选择笔记</h3>
            </div>
            <!-- 牌组选择 -->
            <div class="col-lg-3">
                <div class="input-group"
                     style="margin-top: 10px;margin-bottom: 20px;">
                    <span class="input-group-addon" id="sizing-addon5">牌组</span>
                    <div class="input-group-btn" aria-describedby="sizing-addon2">
                        <button id="noteInDeckId" type="button" class="btn btn-default dropdown-toggle"
                                data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false" value="">
                            所有牌组<span class="caret" style="margin-left:0.5em"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" id="noteInDeckIdList"></ul>
                    </div>
                    <!-- /btn-group -->
                </div>
            </div>
            <!-- /.col-lg-2 -->
            <div class="col-lg-4 myline">
                <div class="input-group">
                    <span class="input-group-addon" id="sizing-addon2">搜索</span>
                    <input id="searchTextInput" type="text" class="form-control"
                           placeholder="搜索笔记内容" aria-describedby="sizing-addon2"
                           onchange="getTableDataByDeck(undefined,undefined,1);"
                    >
                </div>
            </div>
            <div class="col-lg-3 myline">
                <div style="padding: 6px 10px;font-size:16px;text-align: right;color: #6F6F73;">
                    已选中<span id="selectedCount">0</span>/<span id="totalCount">1</span>个
                </div>
            </div>
        </div>
        <!-- /.row -->
        <div class="tableDiv myline">
            <div class="tableBorderDiv ">
                <table id="myaddtable" width="100%" class="mytable">
                    <tr>
                        <th>
                            <button type="button" class="btn btn-default" aria-haspopup="true"
                                    aria-expanded="false">
                                序号<span class="caret" style="margin-left:0.5em"></span>
                            </button>
                        </th>
                        <th>
                            <button type="button" class="btn btn-default" aria-haspopup="true"
                                    aria-expanded="false">
                                笔记类型<span class="caret" style="margin-left:0.5em"></span>
                            </button>
                        </th>
                        <th>
                            <button type="button" class="btn btn-default" aria-haspopup="true"
                                    aria-expanded="false">
                                笔记标题<span class="caret" style="margin-left:0.5em"></span>
                            </button>
                        </th>
                        <th>
                            <button type="button" class="btn btn-default" aria-haspopup="true"
                                    aria-expanded="false">
                                添加时间<span class="caret" style="margin-left:0.5em"></span>
                            </button>
                        </th><!-- /btn-group -->
                    </tr>
                </table>
            </div>
        </div>
        <div class="row myline">
            <div class="col-lg-8" >
                <nav aria-label="Page navigation" style="height: 34px">
                    <ul class="pagination" style="margin: 0" id="pageNav">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <!--/col-lg-8-->
            <div class="col-lg-2">
                <button id="HCloseBtn" type="button"
                        class="btn btn-default HCloseBtn" style="width: 100%">
                    确定
                </button>
            </div>
            <!-- 确认按钮结束 -->
            <div class="col-lg-2">
                <button type="button" class="btn btn-danger HCloseBtn"
                        style="width: 100%">取消
                </button>
            </div>
        </div>
    </form>
</div>
<!--添加弹窗结束-->

<!--编辑笔记弹窗开始-->
<link rel="stylesheet"
      href="websrc/css/editnote.css">
<div id="editNoteHBox" style="display: none">
    <div class="row">
        <input type="hidden" id="noteId">
        <div class="col-lg-4">
            <!--标题-->
            <h2>编辑笔记</h2>
        </div><!--end/.col-lg-4-->
        <div class="col-lg-2">
        </div><!--end/.col-lg-2-->
        <div class="col-lg-3 myline">
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon3">笔记类型</span>
                <div class="input-group-btn" aria-describedby="sizing-addon3">
                    <button id="noteTypeId" type="button"
                            class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        基础正反<span class="caret" style="margin-left:0.5em"></span>
                    </button>
                    <ul class="dropdown-menu" id="noteTypeIdList">
                        <li><a href="javascript:changeDropDownBtnValue('基础正反','knowledgeType','')">基础正反</a></li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
        </div><!--/col-lg-4-->
        <div class="col-lg-3 myline">
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon3"> 牌 组 </span>
                <div class="input-group-btn" aria-describedby="sizing-addon3">
                    <button id="deckNameId" type="button"
                            class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        节点<span class="caret" style="margin-left:0.5em"></span>
                    </button>
                    <ul class="dropdown-menu" id="deckNameIdList">
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
        </div>
    </div><!--end/.row-->
    <div id="areaContentsDivid">
        <div id="areaContentId">
            <h4>正面</h4>
            <textarea >

                </textarea>
        </div>
    </div><!--end/#areaContentsDivid-->
    <div class="row myline">
        <div class="col-lg-8"></div>
        <div class="col-lg-2">
            <button id="editNoteConfirmBtn" type="button"
                    class="btn btn-default HCloseBtn" onclick="toeditNote()" style="width: 100%">
                确定
            </button>
        </div>
        <!-- 确认按钮结束 -->
        <div class="col-lg-2">
            <button type="button" class="btn btn-danger HCloseBtn"
                    style="width: 100%">取消
            </button>
        </div>
    </div>

</div>
<!--编辑笔记弹窗结束-->
<script src="websrc/plug-in/hDialog/js/jquery-1.9.1.min.js"></script>
<script src="websrc/plug-in/hDialog/js/jquery.hDialog.min.js"></script>
<script>
    $(function () {
        // 添加按钮的绑定

        $("#addKnowledgeHBoxBtn").show();
        $("#addKnowledgeHBoxBtn").hDialog({
            box: '#knowledgeHBox',
            closeHide: false,
            width: 800,
            height: 300
        });
        $("#addKnowledgeHBoxBtn").off();
        $("#addKnowledgeHBoxBtn").on('click', $("#editKnowledgeHBoxBtn"), clickaddKnowledge);

        // 编辑按钮的绑定

        $("#editKnowledgeHBoxBtn").show();
        $("#editKnowledgeHBoxBtn").hDialog({
            box: '#knowledgeHBox',
            closeHide: false,
            width: 800,
            height: 300
        });
        $("#editKnowledgeHBoxBtn").off();
        $("#editKnowledgeHBoxBtn").on('click', $("#editKnowledgeHBoxBtn"), clickeditKnowledge);

        // 编辑按钮的绑定

        $("#editKnowledgeHBoxBtn").show();
        $("#editKnowledgeHBoxBtn").hDialog({
            box: '#editNoteHBox',
            closeHide: false,
            width: 800,
            height: 300
        });
        $("#editKnowledgeHBoxBtn").off();
        $("#editKnowledgeHBoxBtn").on('click', $("#editKnowledgeHBoxBtn"), clickeditKnowledge);

    });
</script>

<!-- 下面是思维导图容器 -->
<div id="jsmind_container"></div>
<script type="text/javascript" src="websrc/plug-in/jsmind/js/jsmind.js"></script>
<script type="text/javascript"
        src="websrc/plug-in/jsmind/js/jsmind.draggable.js"></script>
<script type="text/javascript">

    var jm;
    var showMind = function () {
        var mind = {
            "meta": {
                "name": "jsMind-demo-tree",
                "author": "hizzgdev@163.com",
                "version": "0.2"
            },
            /* 数据格式声明 */
            "format": "node_array",
            /* 数据内容 */
            "data": [
                {
                    "id": "root",
                    "topic": "我的知识体系",
                    "isroot": true
                }
            ],

        };
        var options = {
            container: 'jsmind_container',
            editable: false,
            theme: 'primary',
            mode:'side',
            layout:{
                hspace:20,          // 节点之间的水平间距
                vspace:10,          // 节点之间的垂直间距
                pspace:13           // 节点收缩/展开控制器的尺寸
            }
        }
        jm = jsMind.show(options, mind);
    }
    showMind();
    $(function () {
        getJsMindData();
    })
</script>
<script type="text/javascript" src="websrc/js/editnote.js"></script>
<script type="text/javascript" src="websrc/js/knowledge.js"></script>
<script type="text/javascript" src="websrc/js/tool.js"></script>
<script type="text/javascript" src="websrc/js/common.js"></script>
<!-- <button onclick="getData()">更新数据</button> -->
</body>
</html>